<template>
  <div class="auditgoods">
    <a-card title="商品管理" style="width: 100%">
      <a-input-search slot="extra" placeholder="请输入id进行查询" style="width: 200px" @search="onSearch" />
      <div class="goods_table">
        <a-table
          :columns="columns"
          :rowKey="goodsList => goodsList.id"
          :dataSource="goodsList"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination">
          <div slot="goods_img" slot-scope="goods_img">
            <img :src="goods_img" style="width:120px;" />
          </div>
          <div slot="goods_copywriting" slot-scope="row">
            <div class="copy">
              {{ row.goods_copywriting }}
            </div>
          </div>
          <span slot="coupon" slot-scope="row">
            <a :href="row.coupon_url" target="_blank" rel="noopener noreferrer" class="coupon_a">
              <span>劵</span><em>￥{{ row.coupon_discount }}</em>
            </a>
            <div style="margin-top:8px">
              <div><span>剩余数量:</span><em>{{ row.coupon_surplus_num }}</em></div>
              <div><span>总数量:</span><em>{{ row.coupon_all_num }}</em></div>
            </div>
          </span>
          <div slot="goods_start_time" slot-scope="row">
            <div>{{ row.goods_start_time }}</div>
            /
            <div>{{ row.goods_end_time }}</div>
          </div>
          <div slot="goods_price" slot-scope="row">
            <span style="color:orange">¥{{ row.goods_after_price }}</span>
            /
            <span>¥{{ row.goods_price }}</span>
          </div>
          <div slot="commission_bl" slot-scope="row">
            <span style="color:orange">{{ row.commission_bl }}%</span>
          </div>
          <div slot="phone" slot-scope="row">
            <a-popover :title="row.phone" placement="right">
              <template slot="content">
                <p>今日上单通过数量:{{ row.today_num }}</p>
                <p>今日上单总数量:{{ row.today_all_num }}</p>
                <p>今日上单通过率:{{ row.today_all_num==0?'0':((row.today_num/ row.today_all_num)*100).toFixed(2) }}%</p>
                <p>上单通过总数量:{{ row.all_success_num }}</p>
                <p>上单总数量:{{ row.all_goods_num }}</p>
                <p>上单总通过率:{{ row.all_goods_num==0?'0':((row.all_success_num/ row.all_goods_num)*100).toFixed(2) }}%</p>
                <p>商品平均销量:{{ row.avg_goods_num }}</p>
              </template>
              <div>
                {{ row.phone }}
              </div>
            </a-popover>
          </div>
          <div slot="active" slot-scope="row">
            <span class="goodsurl" @click="doPassGoods(row.record_id)">过</span>
            <span class="goodsurl quan" @click="visible=true">拒</span>
            <a-modal
              title="请输入拒绝理由"
              :visible="visible"
              :confirm-loading="confirmLoading"
              ok-text="确认"
              cancel-text="取消"
              @ok="doRefuseGoods(row.record_id)"
              @cancel="handleCancel">
              <a-input placeholder="请输入拒绝理由!(选填)" v-model="errorinfo" />
            </a-modal>
          </div>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
  import {
    getExamineGoods,
    doPassGoods,
    doRefuseGoods
  } from '@/api/audit'
  import Moment from 'moment'

  export default {
    name: 'Auditgoods',
    data () {
      return {
        errorinfo: '',
        visible: false,
        confirmLoading: false,
        count: 0,
        columns: [{
            title: 'ID',
            width: 150,
            align: 'center',
            dataIndex: 'record_id',
            scopedSlots: {
              customRender: 'record_id'
            }
          },
          {
            title: '商品名称',
            align: 'center',
            dataIndex: 'goods_short_name',
            scopedSlots: {
              customRender: 'goods_short_name'
            }
          },
          {
            title: '商品图片',
            align: 'center',
            dataIndex: 'goods_img',
            scopedSlots: {
              customRender: 'goods_img'
            }
          },
          {
            title: '文案',
            align: 'center',
             width: 500,
            // dataIndex: 'goods_copywriting',
            scopedSlots: {
              customRender: 'goods_copywriting'
            }
          },
          {
            title: '优惠/原价',
            align: 'center',
            scopedSlots: {
              customRender: 'goods_price'
            }
          },
          {
            title: '佣金比例',
            align: 'center',
            // dataIndex: 'commission_bl',
            scopedSlots: {
              customRender: 'commission_bl'
            }
          },
          {
            title: '优惠劵',
            align: 'center',
            // dataIndex: 'status',
            scopedSlots: {
              customRender: 'coupon'
            }
          },
          {
            title: '推广人',
            align: 'center',
            // dataIndex: 'phone',
            scopedSlots: {
              customRender: 'phone'
            }
          },
          {
            title: '过期时间',
            align: 'center',
            // dataIndex: 'goods_start_time',
            scopedSlots: {
              customRender: 'goods_start_time'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        pagination: {
          pageSize: 15,
          page: 1,
          total: 0
        },
        loading: false,
        goodsradio: '1',
        goodsList: [
          //     {
          //   id: 12, // 商品表自增id
          //   create_at: '2020-06-02 11:51:35', // 创建时间
          //   item_id: '48200997426', // 京东商品id
          //   goods_img: 'https://img.alicdn.com/imgextra/i2/2207133219198/O1CN015waZAB2HojbEltt9r_!!2207133219198.jpg_310x310.jpg', // 商品图片
          //   goods_short_name: '11', // 短名称
          //   goods_price: '200.00', // 商品原价
          //   goods_after_price: '10.00', // 卷后价
          //   commission_bl: '20', // 佣金比例
          //   goods_copywriting: '22', // 文案
          //   coupon_url: 'https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoeWQgN5g8COpNhO4YT8BjgABlJjrENdCosf-Xvr7CzvcgUftd4ARvnNr416wy4EB9_iVgI-w', // 优惠卷链接
          //   coupon_discount: '20', // 优惠卷面值
          //   coupon_all_num: 1000, // 优惠卷总数量
          //   coupon_surplus_num: 900, // 剩余数量
          //   goods_start_time: '2020-06-02 11:51:35', // 商品开始时间
          //   goods_end_time: '2020-06-02 11:51:35', // 结束时间
          //   phone: '17339612793', // 手机号
          //   today_num: 2, // 今日上单数量
          //   all_num: 2, // 上单总数量
          //   today_tg_num: 0, // 今日上单通过数量
          //   all_tg_num: 2, // 上单通过总数量
          //   avg_goods_num: 0 // 商品平均销量
          // }
        ],
        previewVisible: false,
        previewImage: '',
        fileList: [
          // {
          //   uid: '-1',
          //   name: 'image.png',
          //   status: 'done',
          //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
          // }
        ],
        goodsinfoimg: [], // 商品细节图
        // loading: false,
        videourl: '', // 视频地址
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 20
        }
      }
    },

    computed: {

    },
    created () {
      this.getExamineGoods(1, 15)
    },
    mounted () {

    },
    methods: {
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getExamineGoods(params.page, 15)
      },
      onSearch (value) {
        // console.log(value)
        this.getExamineGoods(1, 15, value)
      },
      handleCancel () {
        this.errorinfo = ''
        this.visible = false
      },
      // 商品拒绝
      doRefuseGoods (recordid) {
        doRefuseGoods({
            record_id: recordid,
            error_info: this.errorinfo
          })
          .then(res => {
            if (res.code === 200) {
              this.getExamineGoods(1, 15)
              // console.log('拒绝返回', res)
              this.$message.success('已拒绝!')
              this.errorinfo = ''
              this.visible = false
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 商品通过
      doPassGoods (recordid) {
        doPassGoods({
            record_id: recordid
          })
          .then(res => {
            if (res.code === 200) {
              this.getExamineGoods(1, 15)

              // console.log('返回', res)
              this.$message.success('商品通过!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      // 获取待审核列表
      getExamineGoods (page, pagesize, goodsid) {
        this.loading = true
        getExamineGoods({
            page: page,
            pagesize: pagesize,
            goods_id: goodsid
          })
          .then(res => {
            if (res.code === 200) {
              console.log('返回', res.data)
              this.goodsList = res.data.data
              for (let i = 0; i < this.goodsList.length; i++) {
                this.goodsList[i].goods_start_time = Moment(parseInt(this.goodsList[i].goods_start_time + '000'))
                  .format(
                    'YYYY-MM-DD HH:mm:ss')
                this.goodsList[i].goods_end_time = Moment(parseInt(this.goodsList[i].goods_end_time + '000')).format(
                  'YYYY-MM-DD HH:mm:ss')
              }
              const pagination = {
                ...this.pagination
              }
              pagination.total = res.data.count
              this.pagination = pagination
              this.loading = false
            } else {
              this.$message.info(res.msg)
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      }

    }
  }
</script>

<style lang='less' scoped>
  .auditgoods {
    .goods_table {
    .copy {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }
      .coupon_a {
        display: block;
        font-size: 0;
        cursor: pointer;
        margin-top: 1px;

        span {

          display: inline-block;
          padding: 0 5px;
          background: #fd7100;
          color: #fff;
          font-size: 12px;
          background: linear-gradient(0deg, rgba(255, 75, 66, 1), rgba(255, 117, 60, 1));
          height: 20px;
          vertical-align: middle;
          line-height: 20px;
        }

        em {
          display: inline-block;
          padding: 0 8px;
          border: 1px solid #fd7100;
          color: #fd7100;
          font-size: 12px;
          height: 20px;
          vertical-align: middle;
          line-height: 18px;
        }
      }

      .goodsurl {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 28px;
        background-color: #fff;
        margin-left: 10px;
        color: #000;
        font-size: 18px;
        // font-weight: bolder;
        text-align: center;
        border-radius: 50%;
        // padding: 5px;
        color: gray;
        cursor: pointer;
        border: 1px solid gray;
      }

      .ant-table-row:hover {
        .goodsurl {
          background-color: green;
          color: #fff;
          // font-weight: bolder;
          border: none;
        }

        .quan {
          background-color: orange;
        }
      }
    }
  }
</style>
